<template>
  <div class="shopcartlist" v-show="listShow">
    <div class="title border-bottom">
      <h1 class="cart">购物车</h1>
      <span class="clear" @click="empty">清空</span>
    </div>
    <div class="list-wapper" ref="selectList">
      <ul>
        <transition-group :duration="500" leave-active-class="animated bounceOutRight">
          <li class="list border-bottom" v-for="(food,index) of selectFoods" :key="index">
            <span class="name">{{food.name}}</span>
            <div class="price">
              <span><span class="yuan">￥</span>{{food.count * food.price}}</span>
            </div>
            <div class="control-wapper">
              <cart-control :food="food" @add="controlAdd"></cart-control>
            </div>
          </li>
        </transition-group>
      </ul>
    </div>
  </div>
</template>

<script>
import CartControl from 'common/cartcontrol/CartControl'
import FadeAnimate from 'common/fade/FadeAnimate'
import BScroll from 'better-scroll'
export default {
  name: 'ShopcartList',
  components: {
    FadeAnimate,
    CartControl
  },
  props: {
    selectFoods: {
      type: Array
    },
    listShow: Boolean
  },
  methods: {
    fold () {
      this.$emit('listhide')
    },
    empty () {
      this.selectFoods.forEach((food) => {
        food.count = 0
      })
    },
    controlAdd () {
      this.$emit('add', event.target)
    }
  },
  computed: {
    totalCount () {
      let count = 0
      this.selectFoods.forEach((food) => {
        count += food.count
      })
      return count
    }
  },
  watch: {
    selectFoods () {
      if (this.selectFoods.length === 0) {
        this.fold()
      } else if (!this.bscroll) {
        this.bscroll = new BScroll(this.$refs.selectList)
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.shopcartlist
  position fixed
  left 0
  bottom .96rem
  width 100%
  z-index -1
  .title
    height .8rem
    line-height .8rem
    padding 0 .36rem
    background-color #f3f5f7
    display flex
    .border-bottom
      &:after
        border .04rem solid rgba(7, 17, 27, 0.1)
    .cart
      font-size .28rem
      font-weight 200
      color rgb(7, 17, 27)
      flex 1
    .clear
      font-size .24rem
      color rgb(0, 160, 220)
      flex 0 0 .5rem
      width .5rem
  .list-wapper
    background-color #fff
    max-height 4.34rem
    overflow hidden
    .border-bottom
      &:after
        border .02rem solid rgba(7, 17, 27, 0.1)
    .list
      position relative
      padding .24rem 0
      margin 0 .36rem
      box-sizing border-box
      .border-bottom
        &:after
          border .02rem solid rgba(7, 17, 27, 0.1)
      .name
        font-size .28rem
        color rgb(7, 17, 27)
        line-height .48rem
      .price
        position absolute
        right 2rem
        bottom .24rem
        line-height .48rem
        font-size .28rem
        font-weight 700
        color rgb(240, 20, 20)
        .yuan
          font-size .2rem
          font-weight 200
      .control-wapper
        position absolute
        right -.1rem
        bottom .12rem
</style>
